/**
 * dialog 弹窗插件
 */
;(function ($) {
    'use strict';

    var defaults;

    $.modal = (params) => {
        params = $.extend({}, defaults, params);
        const buttons = params.buttons;
        //- 组装按钮
        const buttonsHtml = buttons.map(item => `<a href="javascript:;" class="m-btn-dialog ${item.className || ''}">${item.text}</a>`).join('');

        //- 组装弹窗
        const tpl = `<div class="m-dialog">
                    <div class="m-dialog-bd">${params.text || '是否确定执行此操作？'}</div>
                    <div class="m-dialog-ft">${ buttonsHtml }</div>
                  </div>`;

        const dialog = $.openModal(tpl);
        dialog.find(".m-btn-dialog").each((i, e) => {
            $(e).on('click', () => {
                if (params.autoClose) $.closeModal();
                if (buttons[i].onClick) buttons[i].onClick();
            });
        });
    };

    $.openModal = (tpl) => {
        const $mask = $('<div class="m-dialog-mask"></div>').appendTo(document.body);
        $mask.show();
        const $dialog = $(tpl).appendTo(document.body);
        $dialog.show();
        $(document.body).on('touchmove', '.m-dialog-mask, .m-dialog', function(event) {
            event.preventDefault();
        });

        $mask.addClass('m-mask-visible');
        $dialog.addClass('m-dialog-visible');
        return $dialog;
    };

    $.closeModal = () => {
        // $('.m-dialog-mask, .m-dialog').remove();
        $('.m-mask-visible').removeClass('m-mask-visible').transitionEnd(function() {
            $(this).remove();
        });
        $('.m-dialog-visible').removeClass('m-dialog-visible').transitionEnd(function() {
            $(this).remove();
        });
    };

    $.alert = (text, title, callback) => {
        if (typeof title === 'function') {
            callback = arguments[1];
            title = undefined;
        }

        return $.modal({
            text,
            buttons: [{
                // text: title || "确定",
                text:'确定',
                className: 'primary',
                onClick: callback
            }]
        });
    };

    $.confirm = (text, callbackOK, callbackCancel) => {
        return $.modal({
            text,
            buttons: [{
                text: defaults.buttonCancel,
                className: 'default',
                onClick: callbackCancel
            }, {
                // text: title || defaults.buttonOK,
                text: defaults.buttonOK,
                className:'primary',
                onClick: callbackOK
            }]
        });
    };

    // $.prompt = function (text, value, callbackOK, callbackCancel) {
    //     if (typeof value === 'function') {
    //         callbackCancel = arguments[2];
    //         callbackOK = arguments[1];
    //         value = '';
    //     }
    //     return $.modal({
    //         text: "<p class='m-prompt-text'>" + (text || '') + "</p><input type='text' class='m-input m-prompt-input' id='m-prompt-input' value='" + value + "' autocapitalize='off' autocorrect='off' />",
    //         buttons: [{
    //             text: defaults.buttonCancel,
    //             className:'default',
    //             onClick: callbackCancel
    //         }, {
    //             text: defaults.buttonOK,
    //             className: 'primary',
    //             onClick: function () {
    //                 callbackOK && callbackOK($('#m-prompt-input').val());
    //             }
    //         }]
    //     });
    // };

    defaults = $.modal.prototype.defaults = {
        title: '提示',
        text: undefined,
        buttonOK: '确定',
        buttonCancel: '取消',
        buttons: [{
            text: '确定',
            className: 'primary'
        }],
        autoClose: true
    };

})($);